import { useEffect, useState } from "react";
import styles from "./index.less";
import cn from "classnames";

import { DndProvider, useDrag, useDrop, useDragLayer } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import DndStore from './store/DndStore';

import DragText from "./components/DragText";
import DragImage from "./components/DragImage";
import DragQrcode from "./components/DragQrcode";
import DragTableSheet from "./components/DragTableSheet";
import DragPivotSheet from "./components/DragPivotSheet";
import DragGrid from "./components/DragGrid";
import DragDivider from "./components/DragDivider";
import DropZone from "./components/DropZone";
import AttrEditor from "./components/AttrEditor";
import { useLocalObservable } from "mobx-react-lite";

export default () => {

    const store = useLocalObservable(() => new DndStore());

    return (
        <DndProvider backend={HTML5Backend}>
            <div className={styles.container}>
                <div className={cn(styles.zone, styles.drag)}>
                    <DragText/>
                    <DragImage/>
                    <DragQrcode/>
                    <DragTableSheet/>
                    <DragPivotSheet/>
                    <DragGrid/>
                    <DragDivider/>
                </div>

                <DropZone store={store} />

                <AttrEditor store={store} />
            </div>
        </DndProvider>
    );
};
